<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv=X-UA-Compatible content="IE=edge"/>
    <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>学生后台管理</title>
    <link rel="stylesheet" href="css/element/index.css"/>
    <link rel="stylesheet" href="css/main.css"/>
    <link rel="stylesheet" href="css/header.css"/>
    <link rel="stylesheet" href="css/sidebar.css"/>
    <link rel="stylesheet" href="css/right.css"/>
    <script src="js/iframe.js"></script>
</head>
<body>
<div id="app">
    <div class="wrapper">
        <!-- 头部开始 -->
        <div class="header">
            <!-- 折叠按钮 -->
            <div class="collapse-btn" @click="collapseChage">
                <i :class="collapseIcon"></i>
            </div>
            <div class="logo">学生管理系统</div>
            <!-- 右边 -->
            <div class="header-right">
                <div class="header-user-con">
                    <div class="logo">  <span class="el-dropdown-link" style="font-size: 18px;color: #909399">
                        您好,{{realName}}(您的身份是:{{status}})
                    </span></div>
                    <!-- 全屏显示 -->
                    <div class="btn-fullscreen" @click="handleFullScreen">
                        <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                            <i class="el-icon-rank"></i>
                        </el-tooltip>
                    </div>
                    <div class="user-avator"><img :src="avatarImage" /></div>
                    <!-- 用户名下拉菜单 -->
                    <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{nickName}} <i class="el-icon-caret-bottom"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <a href="https://gitee.com/zuo-shunnian" target="_blank">
                                <el-dropdown-item>关于作者</el-dropdown-item>
                            </a>
                            <a href="javascript:;" @click="loginout">
                                <el-dropdown-item>退出登录</el-dropdown-item>
                            </a>
                        </el-dropdown-menu>
                    </el-dropdown>

                </div>
            </div>
        </div>
        <!-- 头部结束 -->

        <!-- 侧边栏开始 -->
        <div class="sidebar">
            <el-menu class="sidebar-el-menu" :collapse="collapse" background-color="#324157"
                     text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
                <!-- 迭代菜单开始 -->
                <template v-for="item in items">
                    <!-- 有子菜单 -->
                    <template v-if="item.subs">
                        <el-submenu :index="item.index" :key="item.index">
                            <!-- 显示菜单名称 -->
                            <template slot="title">
                                <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
                            </template>
                            <!-- 迭代子菜单开始 -->
                            <template v-for="subItem in item.subs">
                                <!-- 显示子菜单名称 -->
                                <el-menu-item :index="subItem.index" :key="subItem.index"@click="jump(subItem.href)">
                                    {{ subItem.title }}
                                </el-menu-item>
                            </template>
                            <!-- 迭代子菜单结束 -->
                        </el-submenu>
                    </template>
                    <!-- 无子菜单 -->
                    <template v-else>
                        <el-menu-item :index="item.index" :key="item.index" @click="jump(item.href)">
                            <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
                        </el-menu-item>
                    </template>
                </template>
                <!-- 迭代菜单结束 -->
            </el-menu>
        </div>
        <!-- 侧边栏结束 -->

        <!-- 主窗体开始 -->
        <div class="content-box" :class="{'content-collapse':collapse}">
            <div class="content">
                <iframe width="100%" id="iframe" name="iframe" onload="SetIFrameHeight()"
                        frameborder="0" src="https://gitee.com/zuo-shunnian"></iframe>
            </div>
        </div>
        <!-- 主窗体结束 -->

    </div>
</div>
<script src="js/vue.min.js"></script>
<script src="js/element.js"></script>
<script src="js/basic.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let bus = new Vue({
        el: '#app',
        data: {
            collapse: false,
            fullscreen: false,
            status: '',
            nickName: '',
            avatarImage: 'img/psc.jpg',
            realName: '',
            collapseIcon: 'el-icon-s-fold',
            items: [
                {
                    icon: 'el-icon-s-home',
                    index: 'dashboard',
                    href: "https://zuoshunnian.github.io/",
                    title: '系统首页'
                },
                {
                    icon: 'el-icon-monitor',
                    index: '网上选课',
                    title: '网上选课',
                    subs: [
                        {
                            index: 'class',
                            href: 'student/CourseInfoList.html',
                            title: '课程信息列表'
                        }
                    ]

                },
                {
                    icon: 'el-icon-s-tools',
                    index: '密码修改',
                    href:  'passwordList.html',
                    title: '密码修改'
                },
                {
                    icon: 'el-icon-document-copy',
                    index: '成绩查询',
                    href: 'student/queryResults.html',
                    title: '成绩查询',
                },
                {
                    icon: 'el-icon-star-off',
                    index: '课程评价',
                    href: 'student/courseEvaluation.html',
                    title: '课程评价',
                }
            ]
        },
        created: function () {
            // 判断是否登录
            let userJSON = localStorage.getItem("user");
            if (userJSON == null) {
                // 没有登录，就转到登录页面
                location.href = "login.html";
            } else {
                // 已经登录就获取登录信息
                let loginUser = JSON.parse(userJSON);
                this.realName = loginUser.sname;
                this.nickName = loginUser.nickName;
                this.status = localStorage.getItem("radio")
            }
        },
        computed: {//计算
        },
        methods: {
            // 侧边栏折叠
            collapseChage() {
                this.collapse = !this.collapse;
                this.collapse ? this.collapseIcon = 'el-icon-s-unfold' : this.collapseIcon = 'el-icon-s-fold';
                bus.$emit('collapse', this.collapse);
            },
            // 全屏事件
            handleFullScreen() {
                let element = document.documentElement;
                if (this.fullscreen) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                } else {
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen();
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
                    } else if (element.msRequestFullscreen) {
                        // IE11
                        element.msRequestFullscreen();
                    }
                }
                this.fullscreen = !this.fullscreen;
            },
            // 用户名下拉菜单选择事件
            handleCommand(command) {
                if (command === 'loginout') {
                    localStorage.removeItem('user')
                    localStorage.removeItem('radio')
                    location.href = "login.html";
                }
            },
            // 退出
            loginout() {
                this.$message({
                    type: 'success',
                    message: '正在退出，请稍等!'
                });
                setTimeout(() => {
                    // 删除本地存储数据
                    localStorage.removeItem('user')
                    localStorage.removeItem('radio')
                    location.href = "login.html";
                }, 1000);
            },
            //跳转页面
            jump(url) {
                let iframeUrl = document.getElementById("iframe");
                iframeUrl.src = url;
            }
        }
    })
</script>
</body>
</html>